<template>
    <div class="secretaryExport">
        <el-dialog width="30%"
                   title="选择需要导出的字段"
                   :visible.sync="transferVis"
                   append-to-body
                   :before-close="handleTransferClose">
            <el-transfer  :titles="['可选择字段', '导出字段']" v-model="transferValue" :data="transferData"></el-transfer>
            <div slot="footer" class="dialog-footer  footer-position">
                <el-button type="primary" @click="downFile()">确 定</el-button>
                <el-button @click="handleTransferClose">返 回</el-button>
            </div>
        </el-dialog>
        <div v-loading="tableLoad">
            <!--<div>
                <el-button type="primary"  plain @click="downLoad('person')" v-if="type">下载</el-button>
            </div>-->
            <div class="title">人员列表（共{{pageable.total}}人）</div>
            <div style="clear: both;overflow:auto;width: 100%;height: 470px;padding: 20px 10px; border:1px solid rgba(151, 213, 158, 1); border-top: none;"  v-infinite-scroll="showTableData">
                <el-card v-for="item in tableData"  @click.native="showBaseInfo(item)" :key="item.index" class="cadreItem">
                    <div>
                        <el-image :src="item.headSculpture" fit="fill" style="width: 140px;height:205px;">
                           <!-- <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>-->
                        </el-image>
                        <div class="headDes">
                            <span>&nbsp;{{item.name}}</span>
                            <span>
                                &nbsp;{{!item.districtName ? '' : item.districtName.indexOf('支部')>-1?item.districtName.replace(/支部/,''):item.districtName}}
                            </span>
                        </div>
                    </div>
                </el-card>
            </div>
           <!-- <el-pagination style="text-align: right;margin-top: 20px; margin-bottom: 20px;clear: left" ref="pagination"
                           :total="pageable.total" :current-page.sync="pageable.currentPage"  :page-sizes="[100]" :pager-count="5"
                           :page-size="pageable.pageSize"
                           @current-change="currentChange" @size-change="sizeChange" layout="total, prev, pager, next">
            </el-pagination>-->
        </div>
    </div>
</template>

<script>
    import CommonCRUD from "@/components/CommonCRUD";
    export default {
        name: "SecretaryExport",
        props: {
            query: {
                type: Array
            },
            apiRoot:{
                type:String
            },
            type:{
                type:String
            },
            cadresType: {
                type: String
            },
            districtId: {
              type: String
            }
        },
        data() {
            return {
                transferVis:false,
                transferValue: '',
                transferData: [],
                columns: [
                    {
                        name: "districtName",
                        type: 'string',
                        des: "所属村",
                    },
                    {
                        name: "name",
                        type: 'string',
                        des: "姓名",
                    },
                ],
                tableLoad:false,
                tableData:[],
                pageable: {
                    total: 0,
                    currentPage: 0,
                    pageSize: 20
                },
                queryForm:{
                  cadresType: this.cadresType,
                  hasRetire: '0',
                  districtId: JSON.parse(sessionStorage.getItem("userInfo")).districtId
                },
            }
        },
        watch: {
            'query': function () {
                this.pageable.total = 0;
                this.pageable.currentPage = 0;
                this.pageable.pageSize = 20;
                this.tableData = [];
                this.showTableData();
            }
        },
        methods: {
            currentChange(value) {
                this.pageable.currentPage = value;
                this.showTableData();
            },
            sizeChange(value) {
                this.pageable.pageSize = value;
            },
            async showTableData(){
                this.tableLoad = true;
                if(this.type === 'result'){
                    this.queryForm = this.query;
                }else{
                    this.query.forEach(item=>{
                        if (item.value) {
                            this.queryForm[item.name] = item.value;
                        }
                    });
                }
                this.pageable.currentPage++;
                try {
                  let path = `${this.apiRoot}/page?cadresType=${this.cadresType}&page=${this.pageable.currentPage - 1}&size=${this.pageable.pageSize}`;
                  if(this.districtId && this.type == 'result'){
                        path = path+`&districtId=${this.districtId}`;
                  }
                  const data = await this.$http('POST',path,this.queryForm,false)
                  this.pageable.total = data.totalElements;
                  this.tableData = this.tableData.concat(data.content);
                  // console.log(this.tableData, '111111');

                  this.tableLoad = false;
                } catch(e) {
                  this.tableLoad = false;
                }
                // this.$http('POST',`${this.apiRoot}/page?page=${this.pageable.currentPage - 1}&size=${this.pageable.pageSize}`,this.queryForm,false).then(data=> {
                //     this.pageable.total = data.totalElements;
                //     this.tableData = this.tableData.concat(data.content);
                //     this.tableLoad = false;
                //     console.log(this.cadresType);

                // }).catch(()=>{
                //     this.tableLoad = false;
                // });
            },
            handleTransferClose(){
                this.transferValue = [];
                this.transferVis = false;
            },
            downFile(){
                this.transferValue = [];
                this.transferVis = false;
            },
            showBaseInfo(item){
              this.$emit('handleChildClick', item)
              console.log(item, 'item');
              // this.showBaseInfoDiaVis = true
            },
            downLoad(type){
                if(type==='person'){
                    this.transferData = [];
                    this.columns.forEach(item=>{
                        this.transferData.push({key:item.name+','+item.des,label:item.des})
                    });
                    this.transferVis = true;
                }else if(type==='honours'){

                }
            },
        },
        mounted() {
            this.showTableData();
        },
    }
</script>
<style>
    .secretaryExport {
        float: right;
        right: 25px;
        margin-right: 10px;
        width: 670px;
    }
    .secretaryExport .el-card__body :hover{
        cursor: pointer!important;

    }
    .secretaryExport .cadreItem{
        float: left;
        width: 140px;
        height: 205px;
        transition: all .3s;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        line-height: 35px;
        font-size: 14px;
        text-align: left;
        border-radius: 5px;
        margin: 10px 10px;
    }
    .secretaryExport .cadreItem:hover{
        transform: scale(1.05);
        border-radius: 5px;
    }
    .secretaryExport .headDes{
        background-color: #55bd94;
        width: 140px;
        height: 35px;
        position: relative;
        top: -48px;
        line-height: 20px;
        color: white;
        opacity:0.9;
    }
    .headDes span:first-child {
        display: block;
        font-size: 12px;
        text-align: center;
        height: 14px;
    }
    .headDes span:last-child {
        display: block;
        font-size: 12px;
        text-align: center;
    }
    .title {
        width:100%;
        height:38px;
        line-height: 38px;
        color: #fff;
        padding-left: 15px;
        background:linear-gradient(90deg,rgba(100,169,179,1),rgba(69,160,78,1));
        border-radius:4px 4px 0px 0px;
    }
</style>

<style scoped>


</style>
